import React from "react";
import {observer, inject} from 'mobx-react';
import {Accordion, List, Table, Tools} from "weaver-mobile";
import {Base64} from 'js-base64'

const getLabel = Tools.getLabel;
const Panel = Accordion.Panel;
const Item = List.Item;
const calBytesCount = function(str){
    let bytesCount = 0;
    if(typeof str == 'string'){
        for (var i = 0; i < str.length; i++)
        {
            let c = str.charAt(i);
            if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
            {
                bytesCount += 1;
            }
            else
            {
                bytesCount += 2;
            }
        }
    }
    return bytesCount;
};
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    renderFieldLogs() {
        let mainChangeLog = [], detailChangeLog = {};
        const {hasMain, hasDetail, detailTableList, checkResult} = this.props;

        if (hasMain) {
            mainChangeLog = this.props.mainChangeLog;
        }

        if (hasDetail) {
            detailChangeLog = this.props.detailChangeLog;
        }

        if (hasMain || hasDetail) {
            return (
                <Accordion defaultActiveKey="0">
                    <Panel header={getLabel(501205, "保护字段")}>
                        {
                            hasMain &&
                            <List>{checkResult === "2" ? this.renderMainFieldLogs2(mainChangeLog) : this.renderMainFieldLogs1(mainChangeLog)}</List>
                        }

                        {
                            hasDetail && this.renderTables(detailChangeLog, detailTableList)
                        }
                    </Panel>
                </Accordion>
            )
        }
    }

    renderMainFieldLogs1(logs) {
        return logs.map((item, index) => {
            let {fieldLabel, showName, isBase64} = item;

            if (isBase64) {
                if (!!showName) {
                    showName = Base64.decode(showName);
                }
            }
            return (
                <div className="list-accordion-item">
                    <div className="sortNo">
                    <span>{`${index + 1}、`}</span>
                    </div>
                    <div>
                    <span>[{fieldLabel}]：</span>
                    <span>&nbsp;</span>
                    <span dangerouslySetInnerHTML={{__html: showName}}></span>
                    </div>
                </div>
            );
        });
    }

    renderMainFieldLogs2(logs) {
        return logs.map((item, index) => {
            let {fieldLabel, showName1, showName2, isBase64} = item;

            if (isBase64) {
                if (!!showName1) {
                    showName1 = Base64.decode(showName1);
                }

                if (!!showName2) {
                    showName2 = Base64.decode(showName2);
                }
            }
            return (
                <div className="list-accordion-item">
                    <div className="sortNo">
                    <span>{`${index + 1}、`}</span>
                    </div>
                    <div>
                    <span>[{fieldLabel}]：</span>
                    <span>"</span>
                    <span dangerouslySetInnerHTML={{__html: showName2}}></span>
                    <span>"</span>
                    <span>&nbsp;{getLabel(501211, "被改为")}&nbsp;</span>
                    <span>"</span>
                    <span className="red" dangerouslySetInnerHTML={{__html: showName1}}></span>
                    <span>"</span>
                    </div>
                </div>
            );
        });
    }

    renderTables(datas, tables) {
        const {checkResult} = this.props;
        return tables.map(item => {
            const {tableId, tableName} = item;

            if ([tableId] in datas) {
                return (
                    <List className="detailTalbe" renderHeader={() => tableName}>
                        <Item>
                            {checkResult == "2" ? this.renderDetailTable2(datas[tableId]) : this.renderDetailTable1(datas[tableId])}
                        </Item>
                    </List>
                );
            } else {
                return null;
            }
        });
    }

    renderDetailTable1(tableData) {
        let {data, columns} = tableData;      //data，表格数据，columns，列信息
        const dataLength ={};
        data = data.map((item1, index1) => {
            const rowData = {};
            columns.map(item2 => {
                const {fieldId, fieldName, fieldLabel} = item2;
                const fieldData = item1[fieldId];

                if (!!fieldData) {
                    let {showName, isBase64} = fieldData;

                    if (isBase64) {
                        if (!!showName) {
                            showName = Base64.decode(showName);
                        }
                    }

                    rowData[fieldName] = "<div class='fieldValue'>" + showName + "</div>";

                    let wd = calBytesCount(showName)*10;
                    let owd = dataLength[fieldName];
                    if(!owd){
                        owd = 100;
                    }
                    if(owd < wd){
                        owd = wd;
                    }
                    dataLength[fieldName] = owd;
                } else {
                    rowData[fieldName] = "";
                }
            });

            return rowData;
        });

        columns = columns.map(item => {
            const {fieldName, fieldLabel} = item;
            let wd = dataLength[fieldName];
            if(!wd||wd < 100){
                wd = 100;
            }
            return {
                width: wd,
                title: fieldLabel,
                dataIndex: fieldName,
                key: fieldName,
                hide: 'false'
            };
        });

        const bodyHeight = data && data.length > 0 ? data.length * 44 : 0;      //表格主体的高度

        const tableHeight = bodyHeight + 44-1;   //表格主体加上表头的高度

        return <Table columns={columns} dataSource={data} tableHeight={tableHeight} autoFill={1}/>
    }

    renderDetailTable2(tableData) {
        let {data, columns} = tableData;      //data，表格数据，columns，列信息
        const dataLength ={};
        data = data.map((item1, index1) => {
            const rowData = {};
            columns.map(item2 => {
                const {fieldId, fieldName, fieldLabel} = item2;
                const fieldData = item1[fieldId];

                if (!!fieldData) {
                    let {showName1, showName2, isBase64} = fieldData;

                    if (isBase64) {
                        if (!!showName1) {
                            showName1 = Base64.decode(showName1);
                        }

                        if (!!showName2) {
                            showName2 = Base64.decode(showName2);
                        }
                    }

                    let showName = "<div>";

                    if (!!showName2) {
                        showName += "<span class='fieldValue'>" + showName2 + "</span>";
                    }
                    if (!!showName2&&!!showName1) {
                        showName += "<span>&nbsp;</span>";
                    }
                    if (!!showName1) {
                        showName += "<span class='fieldValue red'>" + showName1 + "</span>";
                    }

                    showName += "</div>";

                    rowData[fieldName] = showName;
                    let wd = calBytesCount(showName2)*10;
                    wd += calBytesCount(showName1)*10;
                    let owd = dataLength[fieldName];
                    if(!owd){
                        owd = 100;
                    }
                    if(owd < wd){
                        owd = wd;
                    }
                    dataLength[fieldName] = owd;
                } else {
                    rowData[fieldName] = "";
                }
            });

            return rowData;
        });

        columns = columns.map(item => {
            const {fieldName, fieldLabel} = item;
            let wd = dataLength[fieldName];
            if(!wd||wd < 100){
                wd = 100;
            }
            return {
                width: wd,
                title: fieldLabel,
                dataIndex: fieldName,
                key: fieldName,
                hide: 'false'
            };
        });

        const bodyHeight = data && data.length > 0 ? data.length * 44 : 0;      //表格主体的高度

        const tableHeight = bodyHeight + 44 - 1;   //表格主体加上表头的高度

        return <Table columns={columns} dataSource={data} tableHeight={tableHeight} autoFill={1}/>
    }
    renderRemarkLog1() {
        let remarkChangeLog = {}, showName = null;
        const {hasRemark} = this.props;

        if (hasRemark) {
            remarkChangeLog = this.props.remarkChangeLog;
            showName = remarkChangeLog.showName;

            if (!!showName) {
                showName = Base64.decode(showName);
            }
        }

        if (hasRemark) {
            return (
                <div className="second-auth-detail-remark">
                    <Accordion defaultActiveKey="0">
                        <Panel header={getLabel(17614, "签字意见")}>
                            <List>
                                <Item><span dangerouslySetInnerHTML={{__html: showName}}></span></Item>
                            </List>
                        </Panel>
                    </Accordion>
                </div>
            );
        } else {
            return null;
        }
    }

    renderRemarkLog2() {
        let remarkChangeLog = {}, showName1 = null, showName2 = null;
        const {hasRemark} = this.props;

        if (hasRemark) {
            remarkChangeLog = this.props.remarkChangeLog;
            showName1 = remarkChangeLog.showName1;
            showName2 = remarkChangeLog.showName2;

            if (!!showName1) {
                showName1 = Base64.decode(showName1);
            }

            if (!!showName2) {
                showName2 = Base64.decode(showName2);
            }
        }

        if (hasRemark) {
            return (
                <div className="second-auth-detail-remark">
                    <Accordion defaultActiveKey="0">
                        <Panel header={getLabel(17614, "签字意见")}>
                            <List>
                                {
                                    (!!showName2)&&<Item><span dangerouslySetInnerHTML={{__html: showName2}}></span></Item>
                                }
                                {
                                    (!!showName1)&&<Item><span className="red" dangerouslySetInnerHTML={{__html: showName1}}></span></Item>
                                }
                            </List>
                        </Panel>
                    </Accordion>
                </div>
            );
        } else {
            return null;
        }
    }

    render() {
        const {checkResult} = this.props;
        return (
            <div className="second-auth-detail-tamper">
                {this.renderFieldLogs()}
                {checkResult == "2" ? this.renderRemarkLog2() : this.renderRemarkLog1()}
            </div>
        );
    }
}